<template>
  <div class="content">
    <div class="title">
      <!-- <img src="@/assets/img/titlebg.png" alt=""> -->
      <div class="titleft" />
      <div class="titleStore">{{ storeTitle }}</div>
      <div class="timeNow">{{ timeNow }}</div>
    </div>
    <div class="bottom">
      <div class="left">
        <div class="pieChart">
          <div class="title1">
            品类销售额占比<img
              src="../../assets/img/jiantou.png"
              class="jiantou"
            />
          </div>
          <Nightingale />
        </div>
        <div class="msgScroll">
          <div
            class="title1"
            style="margin-left: 0.0417rem; margin-bottom: 0.0417rem"
          >
            七日热销商品排名<img
              src="../../assets/img/jiantou.png"
              class="jiantou"
            />
          </div>
          <div class="msgChart">
            <MsgCharts ref="msgChartRef" />
          </div>
        </div>
      </div>
      <div class="center">
        <CenterCharts ref="cenetrEchartsRef" :msg-lists="msgLists" />
      </div>
      <div class="right">
        <div class="tokenUpBox">
          <div class="title1">
            七日{{ $tokenName }}涨跌明细<img
              src="../../assets/img/jiantou.png"
              class="jiantou"
            />
          </div>
          <div class="tokenUpChart">
            <TokenUpChart ref="tokenupRef" />
          </div>
        </div>
        <div class="moneyBox">
          <div class="title1">
            七日店铺交易金额<img
              src="../../assets/img/jiantou.png"
              class="jiantou"
            />
          </div>
          <div class="moneyChart">
            <MoneyCharts ref="moneyChartsRef" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Charts from '@jiaminghi/charts'
import Nightingale from "@/components/echarts/Nightingale";
import MsgCharts from "@/components/echarts/MsgCharts";
import MoneyCharts from "@/components/echarts/MoneyCharts";
import TokenUpChart from "@/components/echarts/TokenUpChart";
import CenterCharts from "@/components/echarts/CenterCharts";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket.js";
import { login, getScreenData, getUserSid } from "@/api/user";
// import { rsaDecrypt } from '@/utils/commonutils3'
import md5 from "md5";
import { getToken, setSid, getSid, removeToken } from "@/utils/auth";
// import {getSid} from
export default {
  name: "IndexPage",
  components: {
    Nightingale,
    MsgCharts,
    MoneyCharts,
    TokenUpChart,
    CenterCharts,
  },
  data() {
    return {
      userName:
        process.env.NODE_ENV === "development" ? "15936415057" : "store",
      password: process.env.NODE_ENV === "development" ? "123456" : "123456",
      token: "",
      timeNow: "",
      date: "",
      msgLists: [],
      msgList: [],
      sid: "",
      storeTitle: "门店可视化展示",
    };
  },
  created() {
    // this.login()
    console.log(1111111111111);
  },
  mounted() {
    // if (getToken()) {
    this.msgScrollReset();
    this.getScreenData();
    // this.getUserSid()
    // }
    // if (getSid()) {

    // }
    // this.msgScrollReset()
    console.log(2222222222222);
    this.date = setInterval(this.getTime, 1000);
    if (getSid()) {
      connectWebsocket(
        // 地址
        // 'ws://192.168.3.18:9105/websocket/' + getSid(),
        // 'ws://8.141.7.66:9105/websocket/' + getSid(),
        "wss://www.yukukeji.com/ws/erp/websocket/" + getSid(),
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (res) => {
          const datas = JSON.parse(res);
          console.log(res, "拿到结果");
          // const result = datas.data.data
          console.log(datas, "返回结果，拿到之后该干啥干啥吧！");
          // if()
          this.msgLists = [...datas.storeScreenShoppingList];
          this.msgScrollReset();
        },
        // websocket连接失败的回调函数
        (res) => {
          // console.log('失败的回调函数')
          console.log(res, "shibai");
        }
      );
    } else {
      removeToken();
    }
  },
  beforeDestroy() {
    clearInterval(this.date);
    closeWebsocket();
    removeToken();
  },
  methods: {
    async login() {
      if (getToken()) {
        return;
      } else {
        const res = await login({
          userName: this.userName,
          password: md5(this.password),
        });
        console.log(res);
        if (res.code === 200) {
          this.token = res.data.token;
          console.log(this.token);
          this.$store.dispatch("user/login", this.token).then(() => {
            console.log("Success");
            this.getUserSid();
            this.msgScrollReset();
            this.getScreenData();
          });
        }
      }
    },
    // 封裝格式化日期
    getTime() {
      var date = new Date(); // 获取当前时间
      var y = date.getFullYear();
      var m = date.getMonth() + 1; // 返回的0-11 所有加1
      var d = date.getDate();
      var x = date.getDay(); // 返回的是 0-6
      // 创建一个数组存储星期 返回值当索引进行调用
      var arr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var h = date.getHours();
      h = h < 10 ? "0" + h : h; // 小于10时在前面补0 统一格式
      var mi = date.getMinutes();
      mi = mi < 10 ? "0" + mi : mi;
      var se = date.getSeconds();
      se = se < 10 ? "0" + se : se;
      this.timeNow =
        y +
        "-" +
        m +
        "-" +
        d +
        "   " +
        arr[x] +
        "     " +
        h +
        ":" +
        mi +
        ":" +
        se;
      // return y + '年' + m + '月' + d + '日' + h + '小時' + mi + '分钟' + se + '秒' + arr[x]
    },
    msgScrollReset() {
      this.$refs.cenetrEchartsRef.msgScrollReset();
      this.$refs.moneyChartsRef.getStoreUSDMillions();
      this.$refs.msgChartRef.getStoreBestSellers();
      this.$refs.tokenupRef.getScreenToken();
    },
    async getScreenData() {
      const res = await getScreenData();
      if (res.code === 200) {
        this.msgLists = res.data.storeScreenShoppingList;
        this.storeTitle = res.data.storeName
          ? res.data.storeName
          : "门店可视化展示";
        console.log(this.msgLists, "msgList");
      }
    },
    async getUserSid() {
      const res = await getUserSid();
      if (res.code === 200) {
        console.log(res, "sid");
        const data = res.data;
        console.log(data, "用户数据");
        this.sid = data.data;
        setSid(this.sid);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
  background-color: #070c2a;
  padding: 0;
  height: 100%;
  margin: 0;
  .title {
    width: 100%;
    height: 0.3177rem;
    background: url(../../assets/img/titlebg.png) no-repeat center;
    background-size: contain;
    display: flex;
    .titleft {
      width: 33%;
    }
    .titleStore {
      width: 33%;
      text-align: center;
      margin: 0 auto;
      display: inline-block;
      font-size: 0.125rem;
      padding-top: 0.0885rem;
      font-weight: bold;
      color: #eaf1fe;
      text-shadow: 0px 5px 8px rgba(6, 24, 60, 0.14);
      background: linear-gradient(0deg, #2fa4ee 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .timeNow {
      width: 33%;
      box-sizing: border-box;
      display: inline-block;
      font-size: 0.0833rem;
      color: #aadcff;
      padding-top: 0.1823rem;
      padding-left: 0.3125rem;
    }
  }
  .bottom {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 0.1563rem;
    padding-top: 0.0521rem;
    justify-content: space-between;
    color: aliceblue;
    position: fixed;
    top: 0.3177rem;
    background: url(../../assets/img/centerbg.png) no-repeat center 0px;
    background-size: contain;
    .left {
      width: 2.9792rem;
      .pieChart {
        padding: 0.0938rem 0.1094rem;
        height: 1.7552rem;
        margin-bottom: 0.1563rem;
        background: url(../../assets/img/lefttop.png) no-repeat center 0px;
        background-size: contain;
      }
      .msgScroll {
        width: 100%;
        padding: 0.0521rem 0.0781rem 0.1042rem;
        height: 3.1927rem;
        background: url(../../assets/img/leftbt.png) no-repeat center 0px;
        background-size: contain;
        .msgScrolltitle {
          height: 0.2448rem;
        }
      }
    }
    .center {
      flex: 1;
    }
    .right {
      width: 2.9792rem;
      .tokenUpBox {
        padding: 0.1042rem;
        width: 100%;
        height: 1.7552rem;
        background: url(../../assets/img/righttop.png) no-repeat center 0px;
        margin-bottom: 0.1563rem;
        background-size: contain;
      }
      .moneyBox {
        padding: 0.1302rem 0.1042rem;
        width: 100%;
        height: 3.1719rem;
        background: url(../../assets/img/rightbt.png) no-repeat center 0px;
        background-size: contain;
      }
    }
  }
  .title1 {
    font-size: 0.0938rem;
    font-weight: bold;
    color: #bdd1ff;
    line-height: 0.1406rem;
    display: flex;
    text-shadow: 0px 0px 0.0938rem #7586de;
    vertical-align: middle;
    .jiantou {
      width: 0.1406rem;
      height: 0.1406rem;
      margin-left: 0.151rem;
    }
  }
}
</style>
